<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Introduction</title>
    <link rel="stylesheet" href="./introduction.css">
</head>
<body>
    <div class="wrapper">
      <input id='button' type='checkbox'>
      <label for='button'><p>——————</p></label>
      <div class='modal'>
        <div class='content'>
          <article id="inputArticle" contenteditable="true">
            <p>亲爱的朋友：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><br>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;你好!我是文定，现在就读于四川轻化工大学计算机科学与工程学院计算机科学与技术专业215班</p><br>
            <p>很高兴你访问我的网页，我喜欢运动，平时偶尔玩一玩篮球、足球、乒乓球、网球、排球、羽毛球等</p><br>
            <p>我喜欢音乐，听的也比较杂，比较喜欢经典乐、流行乐和民谣，兴趣使然，我自学了一点口琴和吉他</p><br>
            <p>学习之余，我喜欢捣鼓一点事情做，偶尔和朋友们一起做做项目，边学边练，两年来的开发经历也让</p><br>
            <p>我收获了很多。我热爱生活，希望通过自己的双脚慢慢丈量这个世界——真实的世界，不断探索新鲜事</p><br>
            <p>物，不断在探索中挑战、挑战中进步，用所见所得所知所感逐步提升自己阅历，谢谢你能看到这里，</p><br>
            <p>如果你对我感兴趣，这是我的联系方式:'3179738838@qq.com' 期待你的来信！</p><br>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文定</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023年9月7日</p>
          </article>
          <button id="readButton">朗读</button>
        </div>
      </div>
      <div class="lid one"></div>
      <div class="lid two"></div>
      <div class="envelope"></div>
      <div class="letter">
          <p>Hello</p>
      </div>
    </div>
    <script>
      const synth = window.speechSynthesis;
      const inputArticle = document.querySelector("#inputArticle");
      const readButton = document.querySelector("#readButton");
      const stopButton = document.querySelector("#button");
      
      readButton.addEventListener("click", () => {
        const utterThis = new SpeechSynthesisUtterance(inputArticle.textContent);
        const voices = synth.getVoices();
        if (voices.length >= 67) {
          utterThis.voice = voices[66];
        } else {
          console.error("无法选择第66个语音对象。");
        }
        synth.speak(utterThis);
        inputTxt.blur();
      });

      stopButton.addEventListener("click", () => {
        synth.cancel();
      });
    </script>
  </body>
</html>
